<template>
    <div class="common-tree" v-if="options">  
        <div class="common-tree-options" v-if="options.hasFilter">
            <el-input v-model="inputFilter" :placeholder="options.filterPlaceholder" prefix-icon="el-icon-search" size="mini"></el-input>
        </div>  
        <el-tree :props="props" :data="data" :node-key="options.nodeKey" :current-node-key="options.currentKey" :highlight-current="options.isHighlightCurrent" :default-expand-all="options.isDefaultExpandAll" :expand-on-click-node="options.isExpandOnClickNode" :show-checkbox="options.isShowCheckbox" ref="tree" :filter-node-method="handleNodeFilter" @node-click="handleNodeClick">
            <template slot-scope="{ node, data }">
                <div v-if="options.labelFormatter">
                    <span v-html="options.labelFormatter(node, data)"></span>
                </div>
                <span v-else>{{node.label}}</span>                                  
            </template>
        </el-tree>
    </div>
</template>

<script>
export default {
    name: 'CommonTree',
    props: {          
        options: {
            type: Object,
            required: true
        },
        props: {
            type: Object,
            default: () => {}
        },
        data: {
            type: Array,
            default: () => []
        } 
    },
    data () {
        return {
            inputFilter: '' // 输入框过滤器
        }
    },
    watch: {
        // 监听输入框过滤器
        inputFilter(value) {
            this.$refs.tree.filter(value)
        }
    },
    methods: {
        // 获取当前节点KEY
        getCurrentKey() {
            return this.$refs.tree.getCurrentKey()
        },
        // 获取当前节点
        getCurrentNode() {
            return this.$refs.tree.getCurrentNode()
        },
        // 处理节点过滤器
        handleNodeFilter(value, data, node) {
            return data.title.indexOf(value) !== -1
        },
        // 处理点击树节点
        handleNodeClick(data, node) {
            this.$emit('handleNodeClick', data, node)
        }
    }
}
</script>

<style scoped>
.common-tree {
    width: 100%;
    height: 100%;
    border-right: 1px solid #ebeef5;  
    display: flex;
    flex-direction: column
}
.common-tree-options {
    height: 41px;
    border-top: 1px solid #ebeef5;
    margin-right: 10px;
    display: flex;
    align-items: center
}
.common-tree-title {
    min-width: 70px;
    height: 41px;
    line-height: 41px;
    color: #606266;
    font-size: 14px;
    font-weight: 400;
    margin-left: 10px  
}
.common-tree-options .el-input {
    width: 100%;
    margin: 3.5px 10px
}
.el-tree {
    flex: 1;
    overflow-y: auto;
    border-top: 1px solid #ebeef5;  
    border-bottom: 1px solid #ebeef5;
    margin-right: 10px
}
.el-tree span {
    font-size: 14px
}
</style>